<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<h1 class="time">2022-05-19 11:14:30</h1>

		<script>
			var timeEl = document.querySelector('.time')

			function padLeft(content, count, padStr) {
				count = count || 2
				padStr = padStr || '0'

				content = String(content)
				return content.padStart(count, padStr)
			}

			function getTime() {
				var date = new Date()
				var year = date.getFullYear()
				var month = padLeft(date.getMonth() + 1)
				var day = padLeft(date.getDate())
				var hour = padLeft(date.getHours())
				var minutes = padLeft(date.getMinutes())
				var seconds = padLeft(date.getSeconds())
				timeEl.innerHTML = `${year}-${month}-${day} ${hour}:${minutes}:${seconds}`
			}

			getTime()
			setInterval(function () {
				getTime()
			}, 1000)
		</script>
	</body>
</html>
